<template>
    <!-- <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="" width="100">
                </el-table-column>
                <el-table-column label="" width="100">
                    <template slot-scope="{row,$index}">
                        <svg style="margin-right:10px" t="1655777986565" class="icon" viewBox="0 0 1024 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6417" width="16" height="16">
                            <path
                                d="M863.328262 481.340895l-317.344013 0.099772L545.984249 162.816826c0-17.664722-14.336138-32.00086-32.00086-32.00086s-31.99914 14.336138-31.99914 32.00086l0 318.400215-322.368714-0.17718c-0.032684 0-0.063647 0-0.096331 0-17.632039 0-31.935493 14.239806-32.00086 31.904529-0.096331 17.664722 14.208843 32.031824 31.871845 32.095471l322.59234 0.17718 0 319.167424c0 17.695686 14.336138 32.00086 31.99914 32.00086s32.00086-14.303454 32.00086-32.00086L545.982529 545.440667l317.087703-0.099772c0.063647 0 0.096331 0 0.127295 0 17.632039 0 31.935493-14.239806 32.00086-31.904529S880.960301 481.404542 863.328262 481.340895z"
                                p-id="6418" fill="#1296db"></path>
                        </svg>
                        <svg style="margin-right:10px" t="1655778013059" class="icon" viewBox="0 0 1024 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7290" width="16" height="16">
                            <path
                                d="M247.0912 996.1472 100.5568 996.1472c-39.936 0-72.4992-32.5632-72.4992-72.4992L28.0576 81.92c0-39.936 32.5632-72.4992 72.4992-72.4992l766.0544 0c39.936 0 72.4992 32.5632 72.4992 72.4992l0 210.5344c0 12.3904-10.0352 22.528-22.528 22.528s-22.528-10.0352-22.528-22.528L894.0544 81.92c0-15.1552-12.288-27.5456-27.5456-27.5456L100.5568 54.3744c-15.1552 0-27.5456 12.288-27.5456 27.5456L73.0112 923.648c0 15.1552 12.288 27.5456 27.5456 27.5456l146.5344 0c12.3904 0 22.528 10.0352 22.528 22.528S259.4816 996.1472 247.0912 996.1472z"
                                p-id="7291" fill="#1296db"></path>
                            <path
                                d="M745.2672 192.1024 174.6944 192.1024c-12.3904 0-22.528-10.0352-22.528-22.528s10.0352-22.528 22.528-22.528l570.5728 0c12.3904 0 22.528 10.0352 22.528 22.528S757.6576 192.1024 745.2672 192.1024z"
                                p-id="7292" fill="#1296db"></path>
                            <path
                                d="M437.6576 429.6704 174.6944 429.6704c-12.3904 0-22.528-10.0352-22.528-22.528s10.0352-22.528 22.528-22.528l262.9632 0c12.3904 0 22.528 10.0352 22.528 22.528S450.1504 429.6704 437.6576 429.6704z"
                                p-id="7293" fill="#1296db"></path>
                            <path
                                d="M620.6464 310.8864 174.6944 310.8864c-12.3904 0-22.528-10.0352-22.528-22.528s10.0352-22.528 22.528-22.528l445.952 0c12.3904 0 22.528 10.0352 22.528 22.528S633.1392 310.8864 620.6464 310.8864z"
                                p-id="7294" fill="#1296db"></path>
                            <path
                                d="M399.6672 1009.8688c-6.2464 0-12.288-2.56-16.5888-7.2704-5.2224-5.7344-7.168-13.7216-5.12-21.2992l40.8576-146.6368c1.024-3.6864 3.072-7.168 5.7344-9.8304l408.9856-408.9856c14.1312-14.0288 36.9664-14.0288 51.0976 0l97.792 97.792c6.8608 6.8608 10.5472 15.872 10.5472 25.4976s-3.7888 18.7392-10.5472 25.4976L928.8704 618.496c-4.1984 4.1984-9.9328 6.5536-15.872 6.5536s-11.6736-2.3552-15.872-6.5536l-66.048-66.048c-8.8064-8.8064-8.8064-23.04 0-31.8464s23.04-8.8064 31.8464 0l50.176 50.176 31.4368-31.4368L859.136 454.0416 460.6976 852.48 431.104 958.6688 546.7136 936.96l231.7312-231.7312c5.0176-5.4272 50.7904-52.6336 107.2128-56.7296 12.3904-0.9216 23.1424 8.3968 24.064 20.7872 0.9216 12.3904-8.3968 23.1424-20.7872 24.064-40.3456 2.9696-77.4144 42.2912-77.824 42.7008-0.2048 0.2048-0.4096 0.512-0.7168 0.7168L573.5424 973.7216c-3.1744 3.1744-7.2704 5.3248-11.776 6.2464l-158.0032 29.5936C402.432 1009.7664 401.1008 1009.8688 399.6672 1009.8688z"
                                p-id="7295" fill="#1296db"></path>
                        </svg>
                        <svg style="margin-right:10px" t="1655778621715" class="icon" viewBox="0 0 1024 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8172" width="16" height="16">
                            <path
                                d="M840 288H688v-56c0-40-32-72-72-72h-208C368 160 336 192 336 232V288h-152c-12.8 0-24 11.2-24 24s11.2 24 24 24h656c12.8 0 24-11.2 24-24s-11.2-24-24-24zM384 288v-56c0-12.8 11.2-24 24-24h208c12.8 0 24 11.2 24 24V288H384zM758.4 384c-12.8 0-24 11.2-24 24v363.2c0 24-19.2 44.8-44.8 44.8H332.8c-24 0-44.8-19.2-44.8-44.8V408c0-12.8-11.2-24-24-24s-24 11.2-24 24v363.2c0 51.2 41.6 92.8 92.8 92.8h358.4c51.2 0 92.8-41.6 92.8-92.8V408c-1.6-12.8-12.8-24-25.6-24z"
                                p-id="8173" fill="#1296db"></path>
                            <path
                                d="M444.8 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24zM627.2 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24z"
                                p-id="8174" fill="#1296db"></path>
                        </svg>
                    </template>
                </el-table-column>
            </el-table> -->
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="addCategory"></el-button>
            <!-- //树形控件 -->
            <div class="custom-tree-container">
                <div class="block">
                    <el-tree :data="tableData" :props="props" node-key="_id" default-expand-all>
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>{{ node.label }}</span>
                            <span>
                                <svg @click="() => append(data)" style="margin-right:10px" t="1655777986565"
                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="6417" width="16" height="16">
                                    <path
                                        d="M863.328262 481.340895l-317.344013 0.099772L545.984249 162.816826c0-17.664722-14.336138-32.00086-32.00086-32.00086s-31.99914 14.336138-31.99914 32.00086l0 318.400215-322.368714-0.17718c-0.032684 0-0.063647 0-0.096331 0-17.632039 0-31.935493 14.239806-32.00086 31.904529-0.096331 17.664722 14.208843 32.031824 31.871845 32.095471l322.59234 0.17718 0 319.167424c0 17.695686 14.336138 32.00086 31.99914 32.00086s32.00086-14.303454 32.00086-32.00086L545.982529 545.440667l317.087703-0.099772c0.063647 0 0.096331 0 0.127295 0 17.632039 0 31.935493-14.239806 32.00086-31.904529S880.960301 481.404542 863.328262 481.340895z"
                                        p-id="6418" fill="#1296db"></path>
                                </svg>
                                <svg @click="() => fixRow(data)" style="margin-right:10px" t="1655778013059"
                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="7290" width="16" height="16">
                                    <path
                                        d="M247.0912 996.1472 100.5568 996.1472c-39.936 0-72.4992-32.5632-72.4992-72.4992L28.0576 81.92c0-39.936 32.5632-72.4992 72.4992-72.4992l766.0544 0c39.936 0 72.4992 32.5632 72.4992 72.4992l0 210.5344c0 12.3904-10.0352 22.528-22.528 22.528s-22.528-10.0352-22.528-22.528L894.0544 81.92c0-15.1552-12.288-27.5456-27.5456-27.5456L100.5568 54.3744c-15.1552 0-27.5456 12.288-27.5456 27.5456L73.0112 923.648c0 15.1552 12.288 27.5456 27.5456 27.5456l146.5344 0c12.3904 0 22.528 10.0352 22.528 22.528S259.4816 996.1472 247.0912 996.1472z"
                                        p-id="7291" fill="#1296db"></path>
                                    <path
                                        d="M745.2672 192.1024 174.6944 192.1024c-12.3904 0-22.528-10.0352-22.528-22.528s10.0352-22.528 22.528-22.528l570.5728 0c12.3904 0 22.528 10.0352 22.528 22.528S757.6576 192.1024 745.2672 192.1024z"
                                        p-id="7292" fill="#1296db"></path>
                                    <path
                                        d="M437.6576 429.6704 174.6944 429.6704c-12.3904 0-22.528-10.0352-22.528-22.528s10.0352-22.528 22.528-22.528l262.9632 0c12.3904 0 22.528 10.0352 22.528 22.528S450.1504 429.6704 437.6576 429.6704z"
                                        p-id="7293" fill="#1296db"></path>
                                    <path
                                        d="M620.6464 310.8864 174.6944 310.8864c-12.3904 0-22.528-10.0352-22.528-22.528s10.0352-22.528 22.528-22.528l445.952 0c12.3904 0 22.528 10.0352 22.528 22.528S633.1392 310.8864 620.6464 310.8864z"
                                        p-id="7294" fill="#1296db"></path>
                                    <path
                                        d="M399.6672 1009.8688c-6.2464 0-12.288-2.56-16.5888-7.2704-5.2224-5.7344-7.168-13.7216-5.12-21.2992l40.8576-146.6368c1.024-3.6864 3.072-7.168 5.7344-9.8304l408.9856-408.9856c14.1312-14.0288 36.9664-14.0288 51.0976 0l97.792 97.792c6.8608 6.8608 10.5472 15.872 10.5472 25.4976s-3.7888 18.7392-10.5472 25.4976L928.8704 618.496c-4.1984 4.1984-9.9328 6.5536-15.872 6.5536s-11.6736-2.3552-15.872-6.5536l-66.048-66.048c-8.8064-8.8064-8.8064-23.04 0-31.8464s23.04-8.8064 31.8464 0l50.176 50.176 31.4368-31.4368L859.136 454.0416 460.6976 852.48 431.104 958.6688 546.7136 936.96l231.7312-231.7312c5.0176-5.4272 50.7904-52.6336 107.2128-56.7296 12.3904-0.9216 23.1424 8.3968 24.064 20.7872 0.9216 12.3904-8.3968 23.1424-20.7872 24.064-40.3456 2.9696-77.4144 42.2912-77.824 42.7008-0.2048 0.2048-0.4096 0.512-0.7168 0.7168L573.5424 973.7216c-3.1744 3.1744-7.2704 5.3248-11.776 6.2464l-158.0032 29.5936C402.432 1009.7664 401.1008 1009.8688 399.6672 1009.8688z"
                                        p-id="7295" fill="#1296db"></path>
                                </svg>
                                <svg @click="() => remove(node, data)" style="margin-right:10px" t="1655778621715"
                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="8172" width="16" height="16">
                                    <path
                                        d="M840 288H688v-56c0-40-32-72-72-72h-208C368 160 336 192 336 232V288h-152c-12.8 0-24 11.2-24 24s11.2 24 24 24h656c12.8 0 24-11.2 24-24s-11.2-24-24-24zM384 288v-56c0-12.8 11.2-24 24-24h208c12.8 0 24 11.2 24 24V288H384zM758.4 384c-12.8 0-24 11.2-24 24v363.2c0 24-19.2 44.8-44.8 44.8H332.8c-24 0-44.8-19.2-44.8-44.8V408c0-12.8-11.2-24-24-24s-24 11.2-24 24v363.2c0 51.2 41.6 92.8 92.8 92.8h358.4c51.2 0 92.8-41.6 92.8-92.8V408c-1.6-12.8-12.8-24-25.6-24z"
                                        p-id="8173" fill="#1296db"></path>
                                    <path
                                        d="M444.8 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24zM627.2 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24z"
                                        p-id="8174" fill="#1296db"></path>
                                </svg>
                            </span>
                        </span>
                    </el-tree>
                </div>
            </div>
        </el-card>
        <!-- //对话框添加 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="80%">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item v-show="nodeSon == 1" label="父对象">
                    <el-input v-model="form.parentName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="类别名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="显示">
                    <el-switch v-model="form.enable"></el-switch>
                </el-form-item>
                <el-form-item label="类型" size="normal">
                    <el-radio v-model="form.type" label="1">普通</el-radio>
                    <el-radio v-model="form.type" label="2">单页</el-radio>
                </el-form-item>
                <el-form-item label="图标" size="normal">
                    <el-upload class="avatar-uploader" action="http://127.0.0.1:8080/api/upload/files"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="form.sImg" :src="form.sImg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="模板">
                    <el-select v-model="form.contentTemp" placeholder="请选择">
                        <el-option v-for="item in form.options" :key="item._id" :label="item.name" :value="item._id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="seoUrl" size="normal" prop="defaultUrl">
                    <el-input v-model="form.defaultUrl">
                    </el-input>
                </el-form-item>
                <el-form-item label="排序" size="normal">
                    <el-input-number v-model="form.sortId" @change="handleChange" :min="1" :max="10" label="描述文字">
                    </el-input-number>
                </el-form-item>
                <el-form-item label="关键字" size="normal">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.keywords">
                    </el-input>
                </el-form-item>
                <el-form-item label="描述" size="normal" prop="comments">
                    <el-input v-model="form.comments"></el-input>
                </el-form-item>
                <el-form-item label="" size="normal">
                    <el-button v-if="nodeSon == 1" type="primary" @click="submitForm('form')">保存</el-button>
                    <el-button v-else-if="nodeSon == 2" type="primary" @click="submitForm('form')">保存</el-button>
                    <el-button v-else type="primary" @click="submitForm('form')">更新</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { renderTreeData } from '@/utils/auth'
import { reqGetList, reqMyTemplateList, reqAddOne, reqFixOne, reqRemoveOne, reqUpdateNode } from '@/api/contentCategory'
export default {
    name: 'contentCategory',
    data() {
        return {
            title: '',
            nodeSon: '',
            tableData: [],
            dialogVisible: false,
            form: {
                comments: "",
                contentTemp: "",
                defaultUrl: "",
                enable: true,
                keywords: '',
                name: "",
                parentId: "0",
                parentObj: {},
                sImg: "",
                sortId: 1,
                type: "1",
                value: '',
                options: [],
                parentName: '',
                data: '',
                url: "",
                __v: 0,
                _id: "",
                homePage: "",
                id: "",
                sortPath: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入類別名稱', trigger: 'blur' },
                ],
                defaultUrl: [
                    { required: true, message: '請輸入 seoUrl', trigger: 'blur' }
                ],
                comments: [
                    { required: true, message: '請輸入備注', trigger: 'blur' }
                ],
            },
            props: {
                label: 'name',
                children: 'children'
            },
            resultRow: ''
        }
    },
    mounted() {
        //挂载页面数据
        this.getList()
        //获取模板数据
        this.getMyTemplateList()
    },
    methods: {
        async getList() {
            let result = await reqGetList()
            this.tableData = renderTreeData(result.data)
            console.log(this.tableData);
            result.data.forEach((item)=>{
                this.form.parentId = item.uid
            })
        },
        //获取模板数据
        async getMyTemplateList() {
            let result = await reqMyTemplateList()
            this.options = result.data.forEach((item) => {
                this.form.options = item.items || []
                console.log(this.options);
            })
        },
        //添加
        addCategory() {
            this.form.parentName = ''
            this.form.parentId = ''
            this.form.comments = ''
            this.form.defaultUrl = ''
            this.form.sortId = ''
            this.form.keywords = ''
            this.form.name = ''
            this.form.sImg = ''
            this.form.type = ''
            this.form.enable = ''
            this.title = '填写分类信息'
            this.dialogVisible = true
            this.nodeSon = 2
        },
        //提交添加
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    if (this.nodeSon == 1) {
                        //添加子节点
                        this.dialogVisible = false
                        const { comments, contentTemp, defaultUrl, enable, keywords, name, parentId, parentObj, sImg, sortId, type } = this.form
                        let result = await reqAddOne({ comments, contentTemp, defaultUrl, enable, keywords, name, parentId, parentObj, sImg, sortId, type })
                        if (result.status == 200) {
                            this.$message({ type: 'success', message: '添加子节点成功' })
                            //挂载页面数据
                            this.getList()
                        }
                    } else if (this.nodeSon == 2) {
                         const { comments, contentTemp, defaultUrl, enable, keywords, name, parentId, parentObj, sImg, sortId, type } = this.form
                        let result = await reqAddOne({ comments, contentTemp, defaultUrl, enable, keywords, name, parentId, parentObj, sImg, sortId, type } )
                        if (result.status == 200) {
                            this.$message({ type: 'success', message: '添加成功' })
                            this.dialogVisible = false
                            //挂载页面数据
                            this.getList()
                        }
                    } else {
                        //修改子节点
                        this.nodeSon = 3
                        this.form.date = this.resultRow.date
                        this.form.homePage = this.resultRow.homePage
                        this.form.id = this.resultRow.id
                        this.form.uid = this.resultRow.uid
                        this.form.url = this.resultRow.url
                        this.form.__v = this.resultRow.__v
                        this.form._id = this.resultRow._id
                        this.form.sortPath = this.resultRow.sortPath
                        const { keywords, comments, contentTemp, sortPath, date, homePage, id, uid, url, __v, _id, defaultUrl, enable, name, parentId, parentObj, sImg, sortId, type } = this.form
                        let result = await reqUpdateNode({ keywords, comments, contentTemp, sortPath, date, homePage, id, uid, url, __v, _id, defaultUrl, enable, keywords, name, parentId, parentObj, sImg, sortId, type })
                        if (result.status == 200) {
                            this.$message({ type: 'success', message: '更新成功 ' })
                            this.dialogVisible = false
                            this.form.parentName = ''
                            this.form.parentId = ''
                            this.form.comments = ''
                            this.form.defaultUrl = ''
                            this.form.sortId = ''
                            this.form.keywords = ''
                            this.form.name = ''
                            this.form.sImg = ''
                            this.form.type = ''
                            this.form.enable = ''
                            //挂载页面数据
                            this.getList()
                        }
                    }

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //树形控件
        //添加子节点
        append(data) {
            this.form.parentName = ''
            this.form.parentId = ''
            this.form.comments = ''
            this.form.defaultUrl = ''
            this.form.sortId = ''
            this.form.keywords = ''
            this.form.name = ''
            this.form.sImg = ''
            this.form.type = ''
            this.form.enable = ''
            this.title = '填写分类信息'
            this.nodeSon = 1
            this.dialogVisible = true
            const newChild = { id: data.id, label: this.formname, children: [] };
            if (!data.children) {
                this.$set(data, 'children', []);
            }
            data.children.push(newChild);
            this.form.parentName = data.name
            this.form.parentId = data.id
            console.log(data);
            var parentObj = Object.assign(this.form.parentObj, data)
            console.log(parentObj);
        },
        //修改子节点
        async fixRow(data) {
            this.title = '修改分类信息'
            this.nodeSon = 3
            let result = await reqFixOne({ id: data.id })
            this.resultRow = result.data
            console.log(result);
            this.dialogVisible = true
            this.form.parentName = result.data.name
            this.form.parentId = result.data.id
            this.form.comments = result.data.comments
            this.form.defaultUrl = result.data.defaultUrl
            this.form.sortId = result.data.sortId
            this.form.keywords = result.data.keywords
            this.form.name = result.data.name
            this.form.sImg = result.data.sImg
            this.form.type = result.data.type
            this.form.enable = result.data.enable
            //挂载页面数据
            this.getList()
        },
        //移除
        async remove(node, data) {
            this.$confirm('確定刪除嗎?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const parent = node.parent;
                const children = parent.data.children || parent.data;
                const index = children.findIndex(d => d.id === data.id);
                children.splice(index, 1);
                await reqRemoveOne({ ids: data.id })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        handleAvatarSuccess(res, file) {
            console.log(file);
            this.form.sImg = URL.createObjectURL(file.raw);
            this.form.sImg = file.data.reponse.path
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleChange(value) {
            console.log(value);
        }
    },


}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>